<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GEO文本标签</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="map" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    var data = [
        {name: '北京',value: randomData() },
        {name: '天津',value: randomData() },
        {name: '上海',value: randomData() },
        {name: '重庆',value: randomData() },
        {name: '河北',value: randomData() },
        {name: '河南',value: randomData() },
        {name: '云南',value: randomData() },
        {name: '辽宁',value: randomData() },
        {name: '黑龙江',value: randomData() },
        {name: '湖南',value: randomData() },
        {name: '安徽',value: randomData() },
        {name: '山东',value: randomData() },
        {name: '新疆',value: randomData() },
        {name: '江苏',value: randomData() },
        {name: '浙江',value: randomData() },
        {name: '江西',value: randomData() },
        {name: '湖北',value: randomData() },
        {name: '广西',value: randomData() },
        {name: '甘肃',value: randomData() },
        {name: '山西',value: randomData() },
        {name: '内蒙古',value: randomData() },
        {name: '陕西',value: randomData() },
        {name: '吉林',value: randomData() },
        {name: '福建',value: randomData() },
        {name: '贵州',value: randomData() },
        {name: '广东',value: randomData() },
        {name: '青海',value: randomData() },
        {name: '西藏',value: randomData() },
        {name: '四川',value: randomData() },
        {name: '宁夏',value: randomData() },
        {name: '海南',value: randomData() },
        {name: '台湾',value: randomData() },
        {name: '香港',value: randomData() },
        {name: '澳门',value: randomData() }
    ];

    // 产生随机数
    function randomData() {
        return [Math.round(Math.random() * 1000), Math.random() > 0.6];
    }

    //图标
    var weatherIcons = {
        up: '../../images/mapIcons/up.png',
        down: '../../images/mapIcons/down.png'
    };

    // 初始化echarts示例mapChart
    var mapChart = echarts.init(document.getElementById('map'));
    // 数据加载项，增强用户体验
    mapChart.showLoading();
    // 读取geo地图数据
    $.get('../../mapData/map/json/china.json', function (json)
    {
        echarts.registerMap('china', json); // 注册地图
        // 数据加载项，增强用户体验
        mapChart.hideLoading();
        // mapChart的配置
        var option = {
            backgroundColor: '#404a59', // 图表背景色
            title : {
                text: '降水量',
                subtext:'',
                x:'center',
                textStyle : {
                    color: '#fff'
                }
            },
            tooltip : {
                trigger: 'item',
                 //formatter: '{b}<br/>{c} (p / km2)'
            },
            toolbox: {
                show : true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            visualMap: {
                min: 0,
                max: 1000,
                text:['高','低'],
                realtime: false,
                calculable: true,
                //splitNumber: 5,// 步长
                inRange: {
                    color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            animation: true,
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            series: [
                {
                    name: '降水量',
                    type: 'map', // series图表类型
                    roam: true,// 允许缩放
                    zoom: 0,// 默认缩放等级
                    mapType: 'china', // 自定义扩展图表类型
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                var icon = params.data.value[1] ? 'up' : 'down';
                                var valueType = params.data.value[1] ? 'valueUp' : 'valueDown';
                                return params.name
                                    + '：{' + valueType + '|' + params.value + '} {' + icon + '|}';
                            },
                            position: 'inside',
                            backgroundColor: '#fff',
                            padding: [4, 5],
                            borderRadius: 3,
                            borderWidth: 1,
                            borderColor: 'rgba(0,0,0,0.5)',
                            color: '#777',
                            rich: {
                                valueUp: {
                                    color: '#019D2D',
                                    fontSize: 14
                                },
                                valueDown: {
                                    color: 'red',
                                    fontSize: 14
                                },
                                up: {
                                    height: 14,
                                    align: 'center',
                                    backgroundColor: {
                                        image: weatherIcons.up
                                    }
                                },
                                down: {
                                    height: 14,
                                    align: 'center',
                                    backgroundColor: {
                                        image: weatherIcons.down
                                    }
                                }
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: data //业务数据
                }]
        }
        mapChart.setOption(option);
        // 默认加载一次鼠标点击定位居中
        setTimeout(function () {
            mapChart.on('mouseup', function (params) {
                if (!down) {
                    return;
                }
                down = false;

                var e = params.event;

                var geoCoord = mapChart.convertFromPixel('series', [e.offsetX, e.offsetY]);

                mapChart.setOption({
                    series: [{
                        center: geoCoord,
                        zoom: 4,
                        data: data,
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'cubicInOut'
                    }]
                });
            });

            var down;
            mapChart.on('mousedown', function () {
                down = true;
            });
            mapChart.on('mousemove', function () {
                down = false;
            });

        }, 0);
    });
</script>
</html>